<template>
    <div class="card-box">
        <el-card class="box-card">
            <div class="head-title">
                <div class="title">
                    <span>平台信息</span>
                </div>
                <div class="action">
                    <a href="#/interest">利率管理</a>
                </div>
            </div>
            <div class="plate-img">
                <img :src="plateinfo.avatar" alt="">
            </div>
            <div class="plate-info">
                <div class="plt-name">
                    <span class="name" v-html="plateinfo.plName"></span>
                    <el-tag class="tag" @click="auth">{{ "认证" }}</el-tag>
                </div>
                <div class="plt-detail">
                    <div>
                        <div>
                            <i class='bx bxs-edit-location'></i><a>{{ plateinfo.address }}</a>
                        </div>
                        <div>
                            <i class='bx bx-envelope'></i><a>{{ plateinfo.email }}</a>
                        </div>
                        <div>
                            <i class='bx bxs-phone'></i><a>{{ plateinfo.tel }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <el-button class="edit-btn" type="primary">修改</el-button>
        </el-card>
        <el-drawer :visible.sync="drawer" :with-header="false" :append-to-body="true">
            <div class="plateinfo-drawer">
                <p class="title">用户详情</p>
                <p class="lable">官方logo</p>
                <div class="avatar">
                    <img src="/img/mine/def_img.jpg" alt="">
                    <div>
                        <el-button type="primary" style="margin:10px;">上传LOGO</el-button>
                    </div>
                </div>
                <p class="lable">所属平台</p>
                <el-input v-model="authInfo.plateform"></el-input>
                <p class="lable">行业</p>
                <el-input v-model="authInfo.industry"></el-input>
                <p class="lable">规模</p>
                <el-input v-model="authInfo.num"></el-input>
                <p class="lable">用途</p>
                <el-input v-model="authInfo.using" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100"
                    show-word-limit></el-input>
                <div>
                    <el-button type="primary" style="margin:10px;">提交</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<style scoped>
.plateinfo-drawer {
    margin: 30px;
}

.plate-info .tag {
    cursor: pointer;
}

.plateinfo-drawer .title {
    font-weight: 500;
    font-size: 16px;
}

.plateinfo-drawer .lable {
    margin-bottom: 10px;
    font-weight: 100;
    font-size: 14px;
    color: #b5b5b5;
}

.plateinfo-drawer .avatar img {
    width: 120px;
    height: 120px;
    border-radius: 10px;

}

.plt-detail i {
    color: #0080ff;
}

.card-box {
    width: 400px;
    height: 685px;
}

.box-card {
    height: 100%;
}

.edit-btn {
    width: 70%;
    margin-top: 30px;
}

.head-title {
    display: flex;
    justify-content: space-between;
}

.head-title .action a {
    color: #0080ff;
    text-decoration: none;
    line-height: 22px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.plt-detail {
    text-align: left;
    position: relative;
    color: #464646;
    display: block;
    float: left;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.plt-name {
    width: 100%;
    display: flex;
    margin-top: 15px;
    justify-content: center;
    align-items: center;
}

.plt-name .name {
    font-size: 25px;
    font-weight: 600;
    margin-right: 10px;
    text-align: left;
}

.plt-detail div {
    margin-bottom: 10px;
}

.plt-detail a {
    font-weight: 400;
}

.plt-detail i {
    font-size: 18px;
    margin-right: 10px;
    font-weight: 400;
}

.plate-img {
    margin-top: 20px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #0080ff;
    height: 350px;
}

.plate-img img {
    width: 100%;
    height: auto;
}
</style>
<script>
export default {
    props: {
        plateinfo: {
            avatar: {
                type: String,
                default: 'img/mine/def_img.jpg'
            },
            plName: {
                type: String,
                default: '平台名称'
            },
            address: {
                type: String,
                default: '平台地址'
            },
            email: {
                type: String,
                default: '平台电子邮箱'
            },
            tel: {
                type: String,
                default: '平台联系电话'
            },
            scale: {
                type: String,
                default: '平台规模'
            },
            industry: {
                type: String,
                default: '平台所属行业'
            }
        }
    },
    data() {
        return {
            drawer: false,
            authInfo: {},
        }
    },
    methods: {
        auth() {
            this.drawer = true;
        }
    }
}
</script>